<template>
	<view class="main">
		<!-- 顶部滑动导航 -->
		<u-navbar :is-back="false" :border-bottom="false" :background="{backgroundColor: '#d4237a'}">
			<view class="nav">
				<view @click="exit" class="l">
					<u-icon name="arrow-down" color="#fff" size="40rpx"></u-icon>
				</view>
				<view class="topTabs">
					<view v-for="(item, index) in tabs" :key="item.name" @click="changeTab(index)" class="item">
						<view :class="index === curTab ? 'active' : ''">{{item.name}}</view>
						<u-icon v-if="index === curTab" name="arrow-down-fill" color="#fff" size="10rpx"></u-icon>
					</view>
				</view>
				<view class="r">
		
				</view>
			</view>
		</u-navbar>
		<!-- 滑动主体内容、页面内容 -->
		<swiper class="swiperBox" :current="curSwiper" duration="200" @animationfinish="animationfinish">
			<!-- 歌曲 -->
			<swiper-item class="swiperItem musicPage">
				<view class="banner">
					<image src="https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/bd315c6034a85edf21023ab949540923dc54759a.jpg" mode="aspectFill" class="cover"></image>
				</view>
				<view class="center">
					<view class="info">
						<view class="l">
							<view class="song">
								玫瑰花的葬礼
							</view>
							<view class="singer">
								歌手：周杰伦
							</view>
						</view>
						<view class="r">
							<u-icon name="heart" color="#d4237a" size="50rpx"></u-icon>
						</view>
					</view>
					<view class="lyricBox">
						<!-- <bing-lyric></bing-lyric> -->
					</view>
				</view>
				<view class="footer">
					
				</view>
			</swiper-item>
			<!-- 歌词 -->
			<swiper-item class="swiperItem lyricPage">
				lyricPage
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [
					{
						name: '歌曲'
					},
					{
						name: '歌词'
					}
				],
				curTab: 0,
				curSwiper: 0,
			}
		},
		methods: {
			// 退出
			exit(){
				console.log('收起播放器页面');
				uni.navigateBack({
				    delta: 1
				});
			},
			// tab栏切换
			changeTab(index) {
				// console.log(index);
				this.curTab = index;
				this.curSwiper = index;
			},
			// 滑动swiper的滑动动画结束
			animationfinish(e) {
				let current = e.detail.current;
				this.curSwiper = current;
				this.curTab = current;
			},
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('acceptSongID', (data) => {
					console.log(data);
				})
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.topTabs {
			color: #aeaeae;
			font-size: 30rpx;
			min-height: 44px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.item{
				padding: 20rpx 30rpx 0 30rpx;
				height: 80rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.active{
				color: #fff;
			}
		}
		.l {
			margin-left: 40rpx;
			width: 40rpx;
		}
		.r {
			margin-right: 40rpx;
			width: 40rpx;
		}
	}
	
	.swiperBox {
		height: calc( 100vh - 44px );
		background-color: $xj-theme;
		color: #fff;
	}
	.musicPage{
		.banner{
			height: 700rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.cover{
				width: 600rpx;
				height: 600rpx;
				border-radius: 20rpx;
			}
		}
		.center{
			display: flex;
			flex-direction: column;
			align-items: center;
			.info{
				width: 600rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.song{
					font-size: 38rpx;
					font-weight: 500;
				}
				.singer{
					font-size: 26rpx;
				}
				.r{
					padding: 10rpx;
					border-radius: 60%;
					background: rgba(255, 255, 255, .8);
				}
			}
		}
	}
</style>
